var modPageProps = new Class({
	Extends:boxWindow,
			options: {
				BtnRefresh: false,
				BtnMin: false,
				BtnSettings: false,
				BtnClose: true,
				title: lang.label('wbtn_settings'),
				name: 'modPageProps',
				uniqueCss: false,
				modal: true,
				fixed:true,
				isBox:true,
                width:400,
				left:0,
				top:0,
                hasIcon:false,
                hasLayoutSetting:false,
                HideChangeLayoutSetting:false,
                isAddNewTab:false,
                pageNumber:1,
                numberofTabs:0
			},					  
			
			initialize: function(eid, PageProperty,isAddNewTab)
			{
//debugger;			
				if(!isAddNewTab)
				{
					var x = $(eid).getCoordinates();
					this.options.mid = eid.replace(/tab_options_btn/i , "");
				}
                
				this.options.hasIcon = PageProperty.Icon;
				this.options.hasLayoutSetting = PageProperty.LayoutSetting;
				this.options.HideChangeLayoutSetting =PageProperty.HideChangeLayoutSetting;
				this.options.isAddNewTab=isAddNewTab;
				this.parent();
			},

			onSubmit:function(){
				var mx = $('pageProsMessage');
                if(!mx) {
                	mx = new Element('div', {id:'pageProsMessage'}).inject(this.contentBox, 'top');
                }
				if(this.options.isAddNewTab)
				{
					if(this.options.numberofTabs>= tabLimit) {
                    	wfc_error_msg(lang.label('not_more_tabs'), {addTo: mx, closeBtn:false, collapsed:true});
                    	return;
                    }
					if(wfc_mainScreen.checkName(null,$('opttabtitle').value,'',true))
					{
    			       var layout = wfc_getSelectedLayout();   // Terrence, for table layout style.
					   wfc_mainScreen.addCanvas($('opttabtitle').value, layout, null, null, null, null, null, true, null, false, true);
                       this.closeModal();
                    }
                	else
                	{
                    	wfc_error_msg(lang.label('empty_title'), {addTo: mx, closeBtn:false, collapsed:true});	
                	}
				}
				else    // change tab settings.
				{
                    // Terrence 12/03/09, if there are widgets and the layout is changing between 'column' and 'table'
                    // Popup error message, and no effect. (Not allow switching layout between 'column' and 'table'
                    var widgetCount = wfc_get_active_tab_widget_count();
                    if (widgetCount > 0) {
                        // if no widget in tab, it is OK to switch
                        // Check current layout and selected layout.
                        var selected_layout = wfc_getSelectedLayout();
                        if (wfc_is_different_layout_style(currTabLayout, selected_layout)) {
                    	    wfc_error_msg(lang.label('different_layout_style_error'), {addTo: mx, closeBtn:false, collapsed:true});
                    	    return;
                        }
                    }
					if(wfc_mainScreen.checkName(this.options.mid,$('opttabtitle').value,'',false))
					{
						wfc_fireEventToAllActiveWidgets("AfterResize",null);
						this.closeModal();
					} 
					else 
                	{
                    	wfc_error_msg(lang.label('empty_title'), {addTo: mx, closeBtn:false, collapsed:true});
                	}
            	}
			},
            
            ///////////////////////////////////////////////////////////////////////////////////////////////
            // Terrence 12/01/09 for special out; draw the layout selection table			
			// draw the layout selection table according wfc_layoutList
			layoutsPerRow:3,        // layout per row; default is 3
			
            // draw the layout list headers			
			one_row_header: function(row) {
			    var result;
			    
			    result = '<tr>';
			    for(var col=0; col<this.layoutsPerRow; col++) {
			        var oneLayout = wfc_layoutList.layouts[row*this.layoutsPerRow + col];
			        if (!$defined(oneLayout)) break;
			        result += '<th>' + lang.label(oneLayout.name) + '</th>';
			    }
			    result += '</tr>';
			    return result;
			}, 
			// draw the layout list icons
			one_row_icon: function(row) {
			    var result;
			    result = '<tr>';
			    for(var col=0; col<this.layoutsPerRow; col++) {
			        var oneLayout = wfc_layoutList.layouts[row*this.layoutsPerRow + col];
			        if (!$defined(oneLayout)) break;
			        result += '<td>';
			        result += '<label for='; 
			        result += '\"' + oneLayout.id + '\">';
			        result += '<input id=';
			        result += '\"' + oneLayout.id + '\" ';
			        result += ' name=\"optcols\" type=\"radio\"';
			        result += 'value=\"' + oneLayout.value + '\" ';
			        result += oneLayout.checked? 'checked >': '>';              // this option is checked or not
			        result += '<img src=\"' + oneLayout.icon + '\" ';           // icon img
			        result += 'alt=\"' + lang.label(oneLayout.tip) + '\">';       // alt, i.e. tool tips
			        result += '</label></td>';
			    }
			    result += '</tr>';
			    return result;
			}, 

			composeLayoutList: function() {
			    var result;
			    // table begins
			    result = '<table>';
			    for(var row=0, layoutListlength=wfc_layoutList.layouts.length; row<layoutListlength; row++) {
		            var oneLayout = wfc_layoutList.layouts[row*this.layoutsPerRow];
		            if (!$defined(oneLayout)) break;  // end of display
		            //result += this.one_row_header(row);
		            result += this.one_row_icon(row);
		            result += '<tr><td> &nbsp; </td></tr>';   // one_empty_row
			    }

			    // table ends
			    result += '</table>';
			    return result;
			},
            ///////////////////////////////////////////////////////////////////////////////////////////////
			
			onFinish: function(){
//debugger;			
                var overLay = $('modaloverlay');
                overLay.setStyle('top' , '50px');
                var scroll = $(document.body).getScroll().y;
                overLay.setStyle('top' , (50+scroll) +'px');                
				if(this.options.isAddNewTab)
				{
				    // add new tab
					this.fillTitle(lang.label("new_tab"));
					var noOfTabs=new Array();
					var spll, y;
					if(wfc_mainScreen.num_canvases >1)
					{
						for(var i=1; i <= wfc_mainScreen.num_canvases; i++)
						{ 
							if($defined($('tab_box'+i))) 
							{
								y = $('tab_box'+i).innerHTML;
								spll = y.split("<!--");
								spll = spll[1].split("-->");
								var pdata = JSON.decode(html_entity_decode(spll[0]));
								noOfTabs.push( pdata.pageNumber );			//page no for all the widgets to put
							}
						}
						noOfTabs.sort(sortTabsNumbers);
						this.options.numberofTabs= noOfTabs.length;
						if(noOfTabs.length>0)
						{
							if(noOfTabs)
								 this.options.pageNumber = parseInt(noOfTabs[0])+1;	
							else
								 this.options.pageNumber = wfc_mainScreen.num_canvases+1;
						}
						else
						{
							this.options.pageNumber=1;
						}
					}
					else if(wfc_mainScreen.num_canvases==1)
					    this.options.pageNumber = wfc_mainScreen.num_canvases;
					else
						this.options.pageNumber=1;	
				}
				else
				{ 
				    // set tab layout.
					this.fillTitle(this.options.title);
					// set wfc_layoutList.layouts checked
					wfc_setLayoutListCheckedItem(currTabLayout);
				}
				var showlayoutsetting=true;
				if(this.options.hasLayoutSetting)
				{
					if(this.options.HideChangeLayoutSetting && !this.options.isAddNewTab)
						showlayoutsetting=false;
				}
				else
					showlayoutsetting=false;
				var content = '<div style="padding:10px;">';
				
                // title
    			content += '<table width="100%"><tr><td width="25%" nowrap="nowrap">'+lang.label('inp_title')+' </td><td><input type="text" name="opttabtitle" id="opttabtitle" value="'+((this.options.isAddNewTab)?lang.label("upperpage")+" "+ this.options.pageNumber:(wfc_loc_pageName ? htmlentities(lang.label(currTabTitle)) : htmlentities(currTabTitle)))+'" size="40" maxlength="64" ></td></tr>';

                // layout setting
				content += '<tr'+((showlayoutsetting)?'':' style="display:none;"')+'>';
                content += '<td valign="top" nowrap="nowrap">'+lang.label('inp_layout')+' </td>'+ '<td id="layout_list">';
                           
                // The layout list
                content += this.composeLayoutList();
				content += '</td></tr>' ;
                
                // icon settings
                content += '<tr'+(this.options.hasIcon?'':' style="display:none;"')+'>';
                content += '<td nowrap="nowrap">'+lang.label('_select_tab_icon')+' </td><td>';
				content += '<a onclick="javascript:change_icon(\'anchor.gif\');" href="javascript:void(0);"><img src="img/default/anchor.gif" style="margin: 1px;"></a>';
				content += '<a onclick="javascript:change_icon(\'attach.gif\');" href="javascript:void(0);"><img src="img/default/attach.gif" style="margin: 1px;"></a>';
				content += '<a onclick="javascript:change_icon(\'basket.gif\');" href="javascript:void(0);"><img src="img/default/basket.gif" style="margin: 1px;"></a>';
				content += '<a onclick="javascript:change_icon(\'bomb.gif\');" href="javascript:void(0);"><img src="img/default/bomb.gif" style="margin: 1px;"></a>';
				content += '<a onclick="javascript:change_icon(\'book.gif\');" href="javascript:void(0);"><img src="img/default/book.gif" style="margin: 1px;"></a>';
				content += '<a onclick="javascript:change_icon(\'book_addresses.gif\');" href="javascript:void(0);"><img src="img/default/book_addresses.gif" style="margin: 1px;"></a>';
				content += '<a onclick="javascript:change_icon(\'book_open.gif\');" href="javascript:void(0);"><img src="img/default/book_open.gif" style="margin: 1px;"></a>';
				
				content += '<br><a href="javascript:void(0)" onclick="javascript:change_icon(\'\')">'+lang.label('_delete_tab_icon')+'</a></td></tr>';
                
				//content += '<tr><td colspan="2" ><input onclick="javascript:wfc_mainScreen.adjustSetts(\''+ n +'\' , $(\'opttabtitle\').value, \'\');$(optopen).remove();optopen = \'\';" type="button" value="'+lang.label('btn_ok')+'"></td></tr></table></div>';
				content += '<tr><td colspan="2" class="footer_buttons"><input id="tab_submit" type="button" value="'+lang.label('btn_save')+'"> &nbsp;<input id="tab_cancel" type="button" value="'+lang.label('btn_cancel')+'"></td></tr></table></div>';
				
				this.fillContent(content);
				$('tab_submit').addEvent('click',this.onSubmit.bind(this));
				$('tab_cancel').addEvent('click',this.closeModal.bind(this));
                $('opttabtitle').select();
				$('overlay').setStyle('height', getScrollHeight()+"px");
                $('layout_list').getElements('img').addEvent('click', function(e){
                    var inp = this.getPrevious('input');
                    if(inp) { inp.checked = true; }
                });
			} 
	});
